<template>
  <div class="tree-select-single-demo">
    <div class="demo-header">
      <h2>树状下拉单选组件演示</h2>
      <p>多级单选树状下拉，只能选择最后一级（叶子节点）</p>
      <div class="feature-tips">
        <div class="tip-item">
          <strong>单选模式：</strong>
          只能选择一个叶子节点，选择后自动关闭下拉菜单
        </div>
        <div class="tip-item">
          <strong>叶子节点限制：</strong>
          只有最后一级的节点（叶子节点）可以被选择
        </div>
        <div class="tip-item">
          <strong>自定义字段：</strong>
          支持自定义数据结构中的字段名配置
        </div>
        <div class="tip-item">
          <strong>状态显示：</strong>● 选中、○ 未选中（只显示在叶子节点）
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h3>基础使用</h3>
      <div class="form-group">
        <label>基础树状单选：</label>
        <TreeSelectSingle
          v-model="basicSelected"
          :options="departmentOptions"
          placeholder="请选择部门"
          @change="onBasicChange"
        />
        <div class="selected-values">
          <strong>已选择：</strong>
          <span v-if="basicSelected">{{
            getSelectedLabel(basicSelected, departmentOptions)
          }}</span>
          <span v-else class="empty">暂无选择</span>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h3>默认展开所有</h3>
      <div class="form-group">
        <label>默认展开所有节点：</label>
        <TreeSelectSingle
          v-model="expandedSelected"
          :options="regionOptions"
          placeholder="请选择地区"
          :default-expand-all="true"
          @change="onExpandedChange"
        />
        <div class="selected-values">
          <strong>已选择：</strong>
          <span v-if="expandedSelected">{{
            getSelectedLabel(expandedSelected, regionOptions)
          }}</span>
          <span v-else class="empty">暂无选择</span>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h3>禁用状态</h3>
      <div class="form-group">
        <label>禁用状态：</label>
        <TreeSelectSingle
          v-model="disabledSelected"
          :options="departmentOptions"
          placeholder="已禁用的下拉"
          :disabled="true"
        />
      </div>
    </div>

    <div class="demo-section">
      <h3>自定义字段名</h3>
      <div class="form-group">
        <label>自定义数据结构（name、id、kids字段）：</label>
        <TreeSelectSingle
          v-model="customSelected"
          :options="customFieldOptions"
          :field-names="{
            label: 'name',
            value: 'id',
            children: 'kids',
          }"
          placeholder="请选择组织架构"
          :default-expand-all="true"
          @change="onCustomChange"
        />
        <div class="selected-values">
          <strong>已选择：</strong>
          <span v-if="customSelected">
            {{ getCustomSelectedLabel(customSelected, customFieldOptions) }}
          </span>
          <span v-else class="empty">暂无选择</span>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h3>综合示例</h3>
      <div class="form-row">
        <div class="form-group">
          <label>选择技能专长：</label>
          <TreeSelectSingle
            v-model="skillSelected"
            :options="skillOptions"
            placeholder="请选择技能"
            :default-expand-all="true"
            @change="onSkillChange"
          />
        </div>

        <div class="form-group">
          <label>选择工作地点：</label>
          <TreeSelectSingle
            v-model="locationSelected"
            :options="locationOptions"
            placeholder="请选择工作地点"
            @change="onLocationChange"
          />
        </div>
      </div>

      <div class="result-panel">
        <h4>选择结果</h4>
        <div class="result-item">
          <strong>技能专长：</strong>
          <span v-if="skillSelected" class="tag">
            {{ getSelectedLabel(skillSelected, skillOptions) }}
          </span>
          <span v-else class="empty">未选择</span>
        </div>
        <div class="result-item">
          <strong>工作地点：</strong>
          <span v-if="locationSelected" class="tag">
            {{ getSelectedLabel(locationSelected, locationOptions) }}
          </span>
          <span v-else class="empty">未选择</span>
        </div>
        <div class="result-item">
          <strong>自定义字段：</strong>
          <span v-if="customSelected" class="tag">
            {{ getCustomSelectedLabel(customSelected, customFieldOptions) }}
          </span>
          <span v-else class="empty">未选择</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TreeSelectSingle from "@/components/form/treeSelectSingle.vue";

export default {
  name: "TreeSelectSingleDemo",
  components: {
    TreeSelectSingle,
  },
  data() {
    return {
      // 基础选择
      basicSelected: "",

      // 展开选择
      expandedSelected: "",

      // 禁用选择
      disabledSelected: "",

      // 自定义字段选择
      customSelected: "",

      // 技能选择
      skillSelected: "",

      // 位置选择
      locationSelected: "",

      // 部门选项数据
      departmentOptions: [
        {
          label: "技术部",
          value: "tech",
          children: [
            {
              label: "前端组",
              value: "frontend",
              children: [
                { label: "Vue开发工程师", value: "vue_dev" },
                { label: "React开发工程师", value: "react_dev" },
                { label: "Angular开发工程师", value: "angular_dev" },
              ],
            },
            {
              label: "后端组",
              value: "backend",
              children: [
                { label: "Java开发工程师", value: "java_dev" },
                { label: "Python开发工程师", value: "python_dev" },
                { label: "Go开发工程师", value: "go_dev" },
              ],
            },
            {
              label: "移动端组",
              value: "mobile",
              children: [
                { label: "iOS开发工程师", value: "ios_dev" },
                { label: "Android开发工程师", value: "android_dev" },
                { label: "Flutter开发工程师", value: "flutter_dev" },
              ],
            },
          ],
        },
        {
          label: "产品部",
          value: "product",
          children: [
            { label: "产品经理", value: "pm" },
            { label: "UI设计师", value: "ui_designer" },
            { label: "UX设计师", value: "ux_designer" },
          ],
        },
        {
          label: "运营部",
          value: "operation",
          children: [
            { label: "市场推广专员", value: "marketing_specialist" },
            { label: "内容运营专员", value: "content_specialist" },
            { label: "用户运营专员", value: "user_specialist" },
          ],
        },
      ],

      // 地区选项
      regionOptions: [
        {
          label: "华东地区",
          value: "east",
          children: [
            {
              label: "上海市",
              value: "shanghai",
              children: [
                { label: "黄浦区", value: "huangpu" },
                { label: "徐汇区", value: "xuhui" },
                { label: "长宁区", value: "changning" },
                { label: "静安区", value: "jingan" },
              ],
            },
            {
              label: "浙江省",
              value: "zhejiang",
              children: [
                { label: "杭州市", value: "hangzhou" },
                { label: "宁波市", value: "ningbo" },
                { label: "温州市", value: "wenzhou" },
                { label: "嘉兴市", value: "jiaxing" },
              ],
            },
          ],
        },
        {
          label: "华南地区",
          value: "south",
          children: [
            {
              label: "广东省",
              value: "guangdong",
              children: [
                { label: "广州市", value: "guangzhou" },
                { label: "深圳市", value: "shenzhen" },
                { label: "东莞市", value: "dongguan" },
                { label: "佛山市", value: "foshan" },
              ],
            },
            {
              label: "福建省",
              value: "fujian",
              children: [
                { label: "福州市", value: "fuzhou" },
                { label: "厦门市", value: "xiamen" },
                { label: "泉州市", value: "quanzhou" },
                { label: "漳州市", value: "zhangzhou" },
              ],
            },
          ],
        },
      ],

      // 技能选项
      skillOptions: [
        {
          label: "编程语言",
          value: "language",
          children: [
            {
              label: "前端技术",
              value: "frontend_tech",
              children: [
                { label: "JavaScript", value: "javascript" },
                { label: "TypeScript", value: "typescript" },
                { label: "Vue.js", value: "vuejs" },
                { label: "React", value: "react" },
                { label: "HTML/CSS", value: "html_css" },
              ],
            },
            {
              label: "后端技术",
              value: "backend_tech",
              children: [
                { label: "Java", value: "java_skill" },
                { label: "Python", value: "python_skill" },
                { label: "Node.js", value: "nodejs" },
                { label: "PHP", value: "php" },
                { label: "Go", value: "golang" },
              ],
            },
          ],
        },
        {
          label: "数据库技术",
          value: "database",
          children: [
            {
              label: "关系型数据库",
              value: "sql",
              children: [
                { label: "MySQL", value: "mysql" },
                { label: "PostgreSQL", value: "postgresql" },
                { label: "Oracle", value: "oracle" },
                { label: "SQL Server", value: "sqlserver" },
              ],
            },
            {
              label: "非关系型数据库",
              value: "nosql",
              children: [
                { label: "MongoDB", value: "mongodb" },
                { label: "Redis", value: "redis" },
                { label: "Elasticsearch", value: "elasticsearch" },
                { label: "Cassandra", value: "cassandra" },
              ],
            },
          ],
        },
      ],

      // 工作地点选项
      locationOptions: [
        {
          label: "北京",
          value: "beijing",
          children: [
            {
              label: "海淀区",
              value: "haidian",
              children: [
                { label: "中关村", value: "zhongguancun" },
                { label: "上地", value: "shangdi" },
                { label: "西二旗", value: "xierqi" },
              ],
            },
            {
              label: "朝阳区",
              value: "chaoyang",
              children: [
                { label: "CBD", value: "cbd" },
                { label: "望京", value: "wangjing" },
                { label: "三里屯", value: "sanlitun" },
              ],
            },
          ],
        },
        {
          label: "上海",
          value: "shanghai_city",
          children: [
            {
              label: "浦东新区",
              value: "pudong",
              children: [
                { label: "陆家嘴", value: "lujiazui" },
                { label: "张江", value: "zhangjiang" },
                { label: "金桥", value: "jinqiao" },
              ],
            },
            {
              label: "徐汇区",
              value: "xuhui_city",
              children: [
                { label: "徐家汇", value: "xujiahui" },
                { label: "漕河泾", value: "caohejing" },
                { label: "田林", value: "tianlin" },
              ],
            },
          ],
        },
      ],

      // 自定义字段名选项（使用name、id、kids字段）
      customFieldOptions: [
        {
          name: "北京总部",
          id: "bj_hq",
          kids: [
            {
              name: "研发中心",
              id: "rd_center",
              kids: [
                { name: "AI团队", id: "ai_team" },
                { name: "大数据团队", id: "bigdata_team" },
                { name: "云计算团队", id: "cloud_team" },
                { name: "区块链团队", id: "blockchain_team" },
              ],
            },
            {
              name: "产品中心",
              id: "product_center",
              kids: [
                { name: "产品设计师", id: "product_design" },
                { name: "用户体验师", id: "user_experience" },
                { name: "产品运营师", id: "product_ops" },
                { name: "数据分析师", id: "data_analyst" },
              ],
            },
          ],
        },
        {
          name: "上海分公司",
          id: "sh_branch",
          kids: [
            {
              name: "销售部",
              id: "sales_dept",
              kids: [
                { name: "华东销售代表", id: "east_sales" },
                { name: "华南销售代表", id: "south_sales" },
                { name: "大客户经理", id: "enterprise_sales" },
                { name: "渠道经理", id: "channel_manager" },
              ],
            },
            {
              name: "市场部",
              id: "marketing_dept",
              kids: [
                { name: "品牌推广专员", id: "brand_promotion" },
                { name: "数字营销专员", id: "digital_marketing" },
                { name: "公关媒体专员", id: "pr_media" },
                { name: "活动策划专员", id: "event_planning" },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    // 基础选择变化
    onBasicChange(value) {},

    // 展开选择变化
    onExpandedChange(value) {},

    // 自定义字段选择变化
    onCustomChange(value) {},

    // 技能选择变化
    onSkillChange(value) {},

    // 位置选择变化
    onLocationChange(value) {},

    // 获取选中值的标签
    getSelectedLabel(value, options) {
      return this.findNodeLabel(value, options) || value;
    },

    // 查找节点标签
    findNodeLabel(value, options) {
      const findNode = (nodes) => {
        for (const node of nodes) {
          if (node.value === value) {
            return node.label;
          }
          if (node.children) {
            const found = findNode(node.children);
            if (found) return found;
          }
        }
        return null;
      };
      return findNode(options);
    },

    // 获取自定义字段的选中值标签
    getCustomSelectedLabel(value, options) {
      return this.findCustomNodeLabel(value, options) || value;
    },

    // 查找自定义字段节点标签
    findCustomNodeLabel(value, options) {
      const findNode = (nodes) => {
        for (const node of nodes) {
          if (node.id === value) {
            return node.name;
          }
          if (node.kids) {
            const found = findNode(node.kids);
            if (found) return found;
          }
        }
        return null;
      };
      return findNode(options);
    },
  },
};
</script>

<style lang="less" scoped>
@primary-color: #4b58dc;

.tree-select-single-demo {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  .demo-header {
    text-align: center;
    margin-bottom: 40px;

    h2 {
      color: #2c3e50;
      margin-bottom: 10px;
      font-size: 28px;
      font-weight: 600;
    }

    p {
      color: #7f8c8d;
      font-size: 16px;
      margin: 0 0 20px 0;
    }

    .feature-tips {
      background: linear-gradient(
        135deg,
        rgba(75, 88, 220, 0.1),
        rgba(255, 255, 255, 0.8)
      );
      border: 1px solid rgba(75, 88, 220, 0.2);
      border-radius: 8px;
      padding: 20px;
      text-align: left;
      max-width: 800px;
      margin: 0 auto;

      .tip-item {
        margin-bottom: 10px;
        font-size: 14px;
        color: #606266;

        &:last-child {
          margin-bottom: 0;
        }

        strong {
          color: @primary-color;
          font-weight: 600;
        }
      }
    }
  }

  .demo-section {
    margin-bottom: 40px;
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

    h3 {
      margin-top: 0;
      margin-bottom: 20px;
      color: @primary-color;
      font-size: 20px;
      font-weight: 600;
      border-bottom: 2px solid @primary-color;
      padding-bottom: 10px;
    }

    .form-group {
      margin-bottom: 25px;

      label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #2c3e50;
        font-size: 14px;
      }

      .selected-values {
        margin-top: 10px;
        padding: 10px;
        background-color: #f8f9fa;
        border-radius: 4px;
        font-size: 14px;
        color: #495057;

        .empty {
          color: #6c757d;
          font-style: italic;
        }
      }
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;

      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }
    }

    .result-panel {
      margin-top: 30px;
      padding: 20px;
      background: linear-gradient(
        135deg,
        rgba(75, 88, 220, 0.1),
        rgba(255, 255, 255, 0.8)
      );
      border-radius: 8px;
      border: 1px solid rgba(75, 88, 220, 0.2);

      h4 {
        margin-top: 0;
        margin-bottom: 15px;
        color: @primary-color;
        font-size: 16px;
      }

      .result-item {
        margin-bottom: 15px;
        display: flex;
        align-items: center;

        &:last-child {
          margin-bottom: 0;
        }

        strong {
          display: inline-block;
          min-width: 100px;
          color: #2c3e50;
          margin-right: 10px;
        }

        .tag {
          display: inline-block;
          background: linear-gradient(
            135deg,
            @primary-color,
            lighten(@primary-color, 20%)
          );
          color: #fff;
          padding: 4px 12px;
          border-radius: 15px;
          font-size: 12px;
          font-weight: 500;
          box-shadow: 0 2px 4px rgba(75, 88, 220, 0.3);
        }

        .empty {
          color: #6c757d;
          font-style: italic;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .tree-select-single-demo {
    padding: 15px;

    .demo-section {
      padding: 20px;

      .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }
  }
}
</style>
